<template>
  <div class="el-dialog-div" ref="formBox">
    <el-form ref="form" :rules="rules" :model="form" label-width="150px">
      <el-form-item label="订单编号" prop="orderNo">
        <el-input v-model.number="form.orderNo" :disabled="true" />
      </el-form-item>
      <el-form-item label="购买时间" prop="createTime">
        <el-input v-model="form.createTime" :disabled="true" />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsNo">
        <el-input v-model="form.goodsNo" :disabled="true" />
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="form.goodsName" :disabled="true" />
      </el-form-item>
      <!-- <el-form-item label="购买数量" prop="amount">
        <el-input v-model.number="form.amount" :disabled="true" />
      </el-form-item> -->

      <el-form-item label="订单状态" prop="state">
        <el-select v-model="form.state" style="width: 100%" :disabled="true">
          <el-option v-for="dict in state" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="提货时间" prop="takeTime">
        <el-input v-model="form.takeTime" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="收货人姓名" prop="pickUpName">
        <el-input v-model="form.pickUpName" />
      </el-form-item>
      <el-form-item label="收货人电话" prop="pickUpPhone">
        <el-input v-model.number="form.pickUpPhone" />
      </el-form-item>
      <el-form-item label="收货地址" prop="pickUpAddress">
        <el-input type="textarea" :rows="2" v-model="form.pickUpAddress" />
      </el-form-item>
      <el-form-item label="提货状态" prop="sendState">
        <el-select v-model="form.sendState" placeholder="提货状态" clearable style="width: 100%">
          <el-option v-for="dict in pickGoodesEnum" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.trackingNumber || form.sendState==2" label="物流公司" prop="sendState">
        <el-select v-model="form.trackingType" placeholder="物流公司" clearable style="width: 100%">
          <el-option v-for="dict in logistcsType" :key="dict.type" :label="dict.name" :value="dict.type" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.sendState == 2" label="快递单号" prop="trackingNumber">
        <el-input v-model.trim="form.trackingNumber" oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" maxlength="28" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pickGoodesEnum } from '@/common/enums'

export default {
  name: 'FormView',
  props: {
    form: {
      type: Object,
    },
    logistcsType: {
      type: Array
    },
    state: {
      type: Array
    }
  },
  watch: {
    "form.sendState": {
      deep: true,
      handler: function (newV, oldV) {
        this.scrollToBottom();
      },
    },
  },

  data() {
    return {
      pickGoodesEnum,
      rules: {
        pickUpAddress: [{ required: true, message: "必填", trigger: "blur" }],//提货地址
        pickUpName: [{ required: true, message: "必填", trigger: "blur" }],//提货收货人
        pickUpPhone: [{ required: true, message: "必填", trigger: "blur" }],//提货收货人电话
        sendState: [{ required: true, message: "必填", trigger: "blur" }],//提货状态
        trackingNumber: [{ required: true, message: "必填", trigger: "blur" }],//快递单号
      },
    }
  },
  mounted() {
  },
  methods: {
    //滚动条触发事件
    scrollEvent(e) {
      if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
      }
    },
    scrollToBottom() {
      //      this.$nextTick(()=>{
      //     var scrollDom = document.getElementById('el-dialog-div');
      //     scrollDom.scrollTop = scrollDom.scrollHeight
      //   })
      this.$nextTick(() => {
        var container = this.$refs.formBox;
        container.scrollTop = container.scrollHeight;
      })
    }

  }
}
</script>

<style lang="scss">
.el-dialog-div {
  height: 70vh;
  overflow: auto;
  padding-right: 30px;
}
</style>